<script lang="ts" setup>
import { computed, ref, watch } from 'vue'
import { AUTH_TYPE_MAP, USER_AUTH_STATUS_ACTION_LIST } from '@/const/user'
import { NButton } from 'naive-ui'
import { userAuthAuditIdGet, userAuthAuditPost } from '@/api'
import type { OUserAuthAuditIdGet } from '@/typed/response'
import { OUserAuthAuditIdGetValue } from '@/typed/response.value'

interface IProps {
	show: boolean;
	id: string;
	width?: number | string;
}

const emit = defineEmits(['update:show', 'audit'])
const props = withDefaults(defineProps<IProps>(), {
	width: 500
})
const userDetail = ref<OUserAuthAuditIdGet>({...OUserAuthAuditIdGetValue})

const formModel = ref({
	status: 1,
	auditReason: '',
})
getAuthInfo(props.id)
watch(() => props.id, async () => {
	if (props.id) {
		await getAuthInfo(props.id)
	}
})

function onUpdateShow(show: boolean) {
	emit('update:show', show)
}

async function getAuthInfo(id: string) {
	const {data} = await userAuthAuditIdGet(id)
	if (data) {
		userDetail.value = data;
	}
}

async function onAudit() {
	if (!formModel.value.status) {
		window.$message.warning('请选择审核状态')
		return;
	}
	const {code} = await userAuthAuditPost({
		id: userDetail.value.id,
		status: formModel.value.status,
		auditReason: formModel.value.auditReason,
	})
	if (code === 200) {
		window.$message.success('审核成功')
		emit('audit')
	}
}

</script>

<template>
	<n-modal
		:show="show"
		@update-show="onUpdateShow"
		preset="dialog"
		:style="{width: width+'px'}"
		title="认证审核"
	>
		<div class="form">
			<n-form label-placement="left" label-width="120">
				<n-form-item label="姓名：" :show-feedback="false">
					{{ userDetail.name }}
				</n-form-item>
				<n-form-item label="证件类型：" :show-feedback="false">
					{{ AUTH_TYPE_MAP[userDetail.type] }}
				</n-form-item>
				<n-form-item label="身份证号：" :show-feedback="false">
					{{ userDetail.idcard }}
				</n-form-item>
				<n-form-item label="证件照片：">
					<n-image-group>
						<n-space>
							<n-image
								width="100"
								height="100"
								:src="userDetail.idcardFront"
							/>
							<n-image
								width="100"
								height="100"
								:src="userDetail.idcardBack"
							/>
						</n-space>
					</n-image-group>
				</n-form-item>
				<n-form-item :rule="[{required:true}]" label="状态：" path="status">
					<n-select
						v-model:value="formModel.status"
						:options="USER_AUTH_STATUS_ACTION_LIST"
						placeholder="审核状态"
					/>
				</n-form-item>
				<n-form-item label="原因：">
					<n-input
						v-model:value="formModel.auditReason"
						placeholder="请输入原因"
						type="textarea"
					/>
				</n-form-item>
			</n-form>
		</div>
		<template #action>
			<n-button style="width: 120px" type="primary" @click="onAudit">
				提交
			</n-button>
		</template>
	</n-modal>
</template>

<style lang="less" scoped>

</style>
